---
title: CSS 基础入门教程 —— 选择器、样式声明
description: CSS 是一种样式表语言，用于描述 HTML 文档的外观和格式。它允许开发者控制网页的布局、颜色、字体等视觉效果。本篇教程将介绍 CSS 的基本概念和用法，帮助初学者快速上手。
date: "2025-04-13"
lang: zh
tags:
  - CSS
  - 前端
category: 笔记
cover: https://cdn.qladgk.com/images/20250508162417118.png
---

import Image from "@/components/mdx/Image";

<Image
  src="https://cdn.qladgk.com/images/20250508162417118.png"
  alt="cover"
  width={999}
  height={527}
  isArticleImage={true}
/>

## CSS 基础简介

本篇将介绍 CSS 入门知识。

<Image
  src="https://cdn.qladgk.com/images/20250413101623751.png"
  alt="CSS 基础简介"
  width={999}
  height={527}
  isArticleImage={true}
/>

会解答像这样的问题：怎样将文本设置为红色？怎样将内容显示在屏幕的特定位置？怎样用背景图片或颜色来装饰网页？还有一些高级的 CSS 特性，比如动画和响应式设计。

### CSS 是什么

Cascading Style Sheets（层叠样式表）是一种样式表语言，和 HTML 类似，CSS 不是编程语言。它也不是标记语言，而是一门样式表语言。

用于描述 HTML 文档的外观和格式。它允许开发者控制网页的布局、颜色、字体等视觉效果。

CSS 与 HTML 和 JavaScript 一起构成了现代网页开发的三大支柱。

### CSS 如何起作用

CSS 用于选择性地为 HTML 元素添加样式。所以就引出了选择器和样式的概念。

假设您有以下这段 HTML 代码：

```html
<p>Hello, world!</p>
```

您可以使用 CSS 选择器来选择该段落元素，并为其添加样式：

```css
p {
  color: blue;
  font-size: 20px;
}
```

<iframe
  style={{
    margin: "20px 0",
    display: "block",
    borderRadius: "10px",
    width: "100%",
    height: "300px",
  }}
  src="https://codepen.io/qlAD/embed/EaxqRyw?default-tab=html%2Cresult"
  frameborder="0"
  loading="lazy"
/>

常见的选择器就是元素选择器，可以使用它来选择所有的某个元素。还可以使用类选择器和 ID 选择器来选择特定的元素。

样式就是一组声明块，每个声明由属性和属性值组成。属性是您想要设置的样式，属性值是您想要应用的样式。

### 纯 CSS 可以做到什么效果

单纯使用 CSS 就可以实现很多效果，比如：

- 颜色和背景
- 字体和文本
- 布局
- 动画
- 响应式设计
- 交互

<iframe
  style={{
    margin: "20px 0",
    display: "block",
    borderRadius: "10px",
    width: "100%",
    height: "500px",
  }}
  src="https://codepen.io/keirafoxy/embed/BXQJoK?default-tab=html%2Cresult"
  frameborder="0"
  loading="lazy"
/>

### CSS 资源网站

https://navnav.co

<Image
  src="https://cdn.qladgk.com/images/20250413103210050.png"
  alt="CSS 资源网站"
  width={999}
  height={527}
  isArticleImage={true}
/>

https://uiverse.io/

<Image
  src="https://cdn.qladgk.com/images/20250413103255384.png"
  alt="CSS 资源网站"
  width={999}
  height={527}
  isArticleImage={true}
/>

## CSS 规则集详解

CSS 规则集是 CSS 的基本组成部分。它由选择器和声明块组成。

<Image
  src="https://cdn.qladgk.com/images/20250413103512315.png"
  alt="CSS 规则集详解"
  width={500}
  height={527}
  isArticleImage={true}
/>

整个结构称为规则集（规则集通常简称为规则），注意各个部分的名称：

| 名称                     | 描述                                                                                                                         |
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------- |
| 选择器（Selector）       | HTML 元素名位于规则集的开头。它定义了需要添加样式的元素（本例中就是 `<p>` 元素）。要给不同的元素添加样式，只需要更改选择器。 |
| 声明（Declaration）      | 它是一条单独的规则（如 `color: red;`）。用来指定为元素的哪个属性添加样式。                                                   |
| 属性（Properties）       | 它是为 HTML 元素添加样式的方式（本例中 color 就是 `<p>` 元素的属性）。在 CSS 中，你可以选择要在规则中影响的属性。            |
| 属性值（Property value） | 位于属性的右边，冒号后面即属性值。它从指定属性的可选值中选择一个值（例如，我们除了 red 之外还有很多属性值可以用于 color）。  |

还需要注意一些语法规则：

- 除了选择器部分，每个规则集都应该包含在成对的大括号里（{}）。
- 在每个声明里要用冒号（:）将属性与属性值分隔开。
- 在每个规则集里要用分号（;）将各个声明分隔开。

### 不同的选择器

在 CSS 中有 5 种常见的选择器

1. 元素选择器（也称作标签或类型选择器）

| 选择的内容               | 示例             | 结果                   |
| ------------------------ | ---------------- | ---------------------- |
| 所有指定类型的 HTML 元素 | `p {color:red;}` | 所有的段落文字变成红色 |

2. ID 选择器

| 选择的内容         | 示例                  | 结果                                              |
| ------------------ | --------------------- | ------------------------------------------------- |
| 具有特定 ID 的元素 | `#my-id {color:red;}` | `<p id="my-id">` 或 `<a id="my-id">` 文字变成红色 |

> 单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID

3. 类选择器

| 选择的内容       | 示例                     | 结果                                                          |
| ---------------- | ------------------------ | ------------------------------------------------------------- |
| 具有特定类的元素 | `.my-class {color:red;}` | `<p class="my-class">` 和 `<a class="my-class">` 文字变成红色 |

> 单一页面中，一个类可以有多个实例

4. 属性选择器

| 选择的内容         | 示例                       | 结果                                          |
| ------------------ | -------------------------- | --------------------------------------------- |
| 拥有特定属性的元素 | `.img[src] {width:100px;}` | 选择 `<img src="myimage.png">` 但不是 `<img>` |

5. 伪类选择器

| 选择的内容           | 示例                   | 结果                                   |
| -------------------- | ---------------------- | -------------------------------------- |
| 特定状态下的特定元素 | `a:hover {color:red;}` | 鼠标指针悬停在链接上时文字颜色变成红色 |

### 如何选择多个部分？

如果要同时选择多个部分，可以用逗号分隔选择器。

```css
p,
li,
h1 {
  color: red;
}
```

上面的代码选择了三个元素：`<p>`、`<li>` 和 `<h1>`。它们都将被设置为红色。

### 伪类和伪元素

由于用户与网页互动，系统会应用以下伪类。

1. `:hover`

如果用户使用鼠标或触控板等指针设备，并将其放在某个元素上，您可以使用 :hover 钩住该状态以应用样式。这是一种提示用户可以与元素互动的实用方法。

<iframe
  style={{
    margin: "20px 0",
    display: "block",
    borderRadius: "10px",
    width: "100%",
    height: "300px",
  }}
  src="https://codepen.io/web-dot-dev/embed/vYgJyNP?default-tab=html%2Cresult"
  frameborder="0"
  loading="lazy"
/>

2. `:active`

当用户在释放点击之前与元素进行积极互动（例如点击）时，系统会触发此状态。如果使用的是鼠标等指针设备，则此状态表示点击开始，但尚未释放。

<iframe
  style={{
    margin: "20px 0",
    display: "block",
    borderRadius: "10px",
    width: "100%",
    height: "300px",
  }}
  src="https://codepen.io/web-dot-dev/embed/YzNxpam?default-tab=html%2Cresult"
  frameborder="0"
  loading="lazy"
/>

3. `:link` 和 `:visited`

`:link` 伪类可应用于任何 `<a>` 元素，前提是该元素的 `href` 值尚未访问。`:visited` 则与 `:link` 相反

<iframe
  style={{
    margin: "20px 0",
    display: "block",
    borderRadius: "10px",
    width: "100%",
    height: "500px",
  }}
  src="https://codepen.io/web-dot-dev/embed/OJWjmzM?default-tab=html%2Cresult"
  frameborder="0"
  loading="lazy"
/>

更多伪类参考：[web.dev](https://web.dev/learn/css/pseudo-classes?hl=zh-cn#the-css-podcast---015:-pseudo-classes)

伪元素就像添加或定位额外的元素一样，而无需添加更多 HTML。

1. `::first-letter`

如果您有一篇文章，并且希望首字母采用大号悬挂字母，就可以用 `::first-letter` 伪元素

<iframe
  style={{
    margin: "20px 0",
    display: "block",
    borderRadius: "10px",
    width: "100%",
    height: "500px",
  }}
  src="https://codepen.io/web-dot-dev/embed/PoWjybP?default-tab=html%2Cresult"
  frameborder="0"
  loading="lazy"
/>

2. `::selection`

借助 `::selection` 伪元素，您可以设置所选文本的外观样式。

<iframe
  style={{
    margin: "20px 0",
    display: "block",
    borderRadius: "10px",
    width: "100%",
    height: "500px",
  }}
  src="https://codepen.io/web-dot-dev/embed/JjEJeZK?default-tab=html%2Cresult"
  frameborder="0"
  loading="lazy"
/>

3. `::before` 和 `::after`

`::before` 和 `::after` 伪元素会在元素内创建子元素

<iframe
  style={{
    margin: "20px 0",
    display: "block",
    borderRadius: "10px",
    width: "100%",
    height: "500px",
  }}
  src="https://codepen.io/web-dot-dev/embed/GRrEYrg?default-tab=html%2Cresult"
  frameborder="0"
  loading="lazy"
/>

### CSS 中的盒子模型

CSS 布局主要是基于盒子模型。每个在页面上占用空间的盒子都有类似的属性：

<Image
  src="https://cdn.qladgk.com/images/20250413111039279.png"
  alt="CSS 盒子模型"
  width={999}
  height={527}
  isArticleImage={true}
/>

- padding（内边距）：是指内容周围的空间。
- border（边框）：是紧接着内边距的实线。
- margin（外边距）：是围绕元素边框外侧的空间。

<Image
  src="https://cdn.qladgk.com/images/20250413111131766.png"
  alt="CSS 盒子"
  width={999}
  height={527}
  isArticleImage={true}
/>

假设您有以下这段 HTML 代码：

```html
<p>I am a paragraph of text that has a few words in it.</p>
```

然后，为它编写以下 CSS：

```css
p {
  width: 100px;
  height: 50px;
  padding: 20px;
  border: 1px solid;
}
```

内容最终的宽度为 142 像素，而非您指定的 100 像素

假设一个盒子的 CSS 如下：

```css
.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}
```

方框实际占用的空间宽为 410px（350 + 25 + 25 + 5 + 5），高为 210px（150 + 25 + 25 + 5 + 5）。

<Image
  src="https://cdn.qladgk.com/images/20250413113854395.png"
  alt="CSS 盒子大小"
  width={999}
  height={527}
  isArticleImage={true}
/>

CSS 显示的所有内容都是一个方框，即使只是一些文本，或者有一个 `border-radius` 使其看起来像一个圆形。

<Image
  src="https://cdn.qladgk.com/images/20250413113554245.gif"
  alt="CSS 盒子示例"
  width={999}
  height={527}
  isArticleImage={true}
/>

### 常见的 CSS 属性

为了减少篇幅，详细的属性见 https://www.cainiaojc.com/css-reference/css-reference.html

<Image
  src="https://cdn.qladgk.com/images/20250413125516162.png"
  alt="CSS 基础属性"
  width={500}
  height={527}
  isArticleImage={true}
/>

## 玩转盒模型

以下是 CSS 做出来的效果

<iframe
  style={{
    margin: "20px 0",
    display: "block",
    borderRadius: "10px",
    width: "100%",
    height: "500px",
  }}
  src="https://codepen.io/qlAD/embed/MYWNXdO?default-tab=html%2Cresult"
  frameborder="0"
  loading="lazy"
/>

## 参考

以上内容参考自：

- [Learn CSS](https://web.dev/learn/css/welcome?hl=zh-cn)
- [mdn web docs](https://developer.mozilla.org/zh-CN/docs/Learn_web_development/Core/Styling_basics)
